<template>
  <div>
    <h1>vue3语法</h1>
    <h2>{{ msg }}</h2>
    <h2>{{ num }}</h2>
    <input type="text" v-model="num" />
    <button @click="add">加法</button>
    <h2>{{ obj.name }}</h2>
    <input type="text" v-model="obj.name" />
    <button @click="showObj">展示对象</button>
    <h2>{{ arr }}</h2>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <div>{{ item }}</div>
      </li>
    </ul>
    <ul>
      <!-- value key index
      只是一个变量名字
      到底这几个变量代表什么值，取决于v-for执行时传入的值是什么
      value tom 10
      key  name  age
      index 下标


      value  name age
      key   tom 10




      平时定义
      obj = {name:'tom' age:18}
      value  tom  18
      key   name  age

      
      
       -->
      <li v-for="(value, key, index) of obj" :key="index">
        <div>{{ value }}---{{ key }}---{{ index }}</div>
      </li>
    </ul>
    <hr />
    <h1>data当中的值</h1>
    <h2>{{ info }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    //   这种写法数据不是响应式
    /*  let msg = "目前看着阳了好像也没啥事！！";
    let num = 0;
    function add() {
      console.log(num);
    } */
    // 在数据上包一个ref,先在import当中引入ref,对基本数据类型的处理包上ref,(处理引用数据类型不是这种方法)
    let msg = ref("目前看着阳了好像也没啥事！！");
    4;
    // let msg = "xx";
    let num = ref(0);
    function add() {
      // 当基本数据类型包上ref之后，变为一个响应式的数据，数据就变为一个ref对象，通过get和set变为响应式数据

      console.log(num);
      console.log(num.value);
      // 在ref对象当中，ts或者说是js当中操作数据获取具体的值 xx.value,在模板（template）当中获取不需要xx.vue,直接使用即可
      num.value += 1;
      //   this.num +=1;
      //   console.log(this);
      //   此处不能使用this,使用报错   之后讲解 生命周期
    }

    // 引用数据类型
    /*  let obj = ref({
      name: "tom",
      age: 18,
    }); */
    // 使用ref或者reactive都需要在import当中引入
    /*   let obj = reactive({
      name: "tom",
      age: 10,
    }); */
    // setup当中定义的数据不是响应式数据
    /*  let obj = {
      name: "tom",
      age: 10,
    }; */
    // ref或者reactive
    /* let obj = ref({
      name: "tom",
      age: 10,
    }); */
    // ref对象 再将其转变为proxy
    // reactive将其变为proxy实现了数据的响应式变换
    let obj = reactive({
      name: "tom",
      age: 10,
    });
    let arr = reactive([1, 2, 5]);
    // 使用ref包裹对象之后，该对象变为ref对象，是响应式数据，但是value值不是该对象是proxy代理对象
    //使用 reactive将对象变为响应式对象，直接它就是proxy
    function showObj() {
      console.log(obj);
      // console.log(arr);
      console.log(num);
    }
    return {
      msg,
      num,
      add,
      obj,
      showObj,
      arr,
    };
    /* 
    setup  
    1.当中的this不是组件对象，不能使用this.data当中的属性，不能访问计算属性、监听器、methods
    2. 所有在模板（template）中使用的数据，都需要在setup函数的return返回值的对象当中返回
    
    setup  data



    
    
    
    */
  },
  data() {
    // 在data当中写个值，在setup当中写个，这两个值的名字，内容不一样，你说听谁的？
    // 有的脚手架会报错，重复命名了，有的电脑的环境不给，使用setup当中的值
    return {
      info: "看看setup和data当中的值一样不",
      // msg: "今天天气好晴朗！！",
    };
  },
});
</script>

<style scoped>
</style>